<!-- 字典管理 -->
<template>
	<div class="bg-ff commonality">
		<div class="main-child-toggle">
			<div :class="{'show-child-item': showDictItem}" class="main-child-toggle-wrapper flex-row">
				<!-- 字典列表子组件 -->
				<dict @dictClick="dictClick" @resetItem="resetItem" class="w50" ref="dict"></dict>
				<!-- 字典数据项子组件 -->
				<el-card class="box-card w50">
					<div class="fz-18" slot="header">
						<svg-icon @click="showDictItem = false" class="back-icon" icon-class="返回" />
						<span>{{ dict.name }}数据项</span>
					</div>
					<!-- 字典数据项子组件 -->
					<dict-item ref="dictItem"></dict-item>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
import Dict from './components/Dict'
import DictItem from './components/DictItem'

export default {
  name: 'index',
  components: { Dict, DictItem },
  data() {
    return {
      dict: {
        name: undefined
      },
      showDictItem: false
    }
  },
  methods: {
    // 字典项点击
    dictClick(row) {
      this.showDictItem = true
      this.dict.name = row.name ? '【' + row.name + '】' : undefined
      this.$refs.dictItem.dictClick(row)
    },
    // 重置字典项
    resetItem() {
      this.$refs.dictItem.dictClick()
    }
  }
}
</script>
